<template>
  <PCard class="bank-account-page-con" :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="card-title" v-if="!isOutsideData">
      <span>银行开户</span>
      <div style="float: right;">
        <a-button @click="goBack" type="primary" style="float: right;">返 回</a-button>
      </div>
    </div>
    <div class="bank-account-page-body">
      <div class="page-body-item" v-if="!isOutsideData">企业名称: {{ entName }}</div>
      <div class="page-body-item">
        <div class="title">请选择开户行</div>
        <div class="body">
          <a-card>
            <a-card-grid style="width:10%;text-align:center" :hoverable="false">
              <div class="card-grid-cont h1"></div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:center" :hoverable="false">
              <div class="card-grid-cont h1">

                上海浦东发展银行<br />（荆州分行营业部）
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:center" :hoverable="false">
              <div class="card-grid-cont h1">

                中国邮政储蓄银行<br>（荆州分行营业部）
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:center" :hoverable="false">
              <div class="card-grid-cont h1">

                招商银行<br>（荆州分行营业部）
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:center" :hoverable="false">
              <div class="card-grid-cont h1">
                浙江网商银行

              </div>
            </a-card-grid>


            <a-card-grid style="width:10%;text-align:left;background-color: #4167E8;" :hoverable="false">
              <div class="card-grid-cont h2 backColor" style="align-items:center;">资料</div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left; " :hoverable="false">
              <div class="card-grid-cont h2">

                1.本人进行线上预约开户、线上意愿视频认证，打 印开户资料（一式两份，开户时带到银行现场填 写）。<br />
                2.企业门牌。<br />
                3.本人到营业执照上的营业地址（中雄荆州公司） 与银行工作人员一起拍照。<br />
                4.本人带身份证原件及财务负责人身份证原件（银行要求必须出示两张身份证原件（银行要求必须出示两张身份证原件）营业执照正副本原件、公章私章财务章，到浦发银行荆州分行营业部进行开户。
              </div>


            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left;" :hoverable="false">
              <div class="card-grid-cont h2">

                1.中雄公司提交客户资料到银行审核（1-2个工 作日），审核通过后安排上门拍照时间。<br />
                2.企业门牌。<br />
                3.本人到营业执照上的营业地址（中雄荆州公司） 与银行工作人员一起拍照。<br />
                4.本人带身份证原件原件、营业执照正副本原件、 公章私章财务章，到邮政银行荆州分行营业部 进行开户。
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left;" :hoverable="false">
              <div class="card-grid-cont h2">

                1.本人进行线上预约开户、线上意愿视频认证。<br />
                2.中雄公司提交客户资料到银行审核（1-2个工作 日）审核通过后安排上门拍照时间。<br />
                3.企业门牌。<br />
                4.本人到营业执照上的营业地址（中雄荆州公司） 与银行工作人员一起拍照。<br />
                5.本人带身份证原件及财务负责人身份证件原件（银行要求必须出示两张身份证原件）、营业执照正副本原件、公章私章财务章，到招商银行荆州分行营业部进行开户。<br />
                6.填写授权委托书，授权中雄公司享有其基本存款账户对账、查询的基本权限
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left;" :hoverable="false">
              <div class="card-grid-cont h2">

                1.使用经营者本人支付宝账号绑定注册支付宝 企业账户。<br />
                2.输入基本存款账号线上办理网商银行一般户。
              </div>
            </a-card-grid>


            <a-card-grid style="width:10%;text-align:left;background-color: #4167E8;" :hoverable="false">
              <div class="card-grid-cont h3 backColor">额度</div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                公转私日限额5万；月限额200万；<br />
                公转公5万；年限额2000万；
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                公转私日限额50万<br />
                公转公50万。 <br />（前三个月无网银功能，正常收款）
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                公转私、公转公日限额预计10万元<br />
                （具体以银行系统评估为准）<br />
                网银审批1个工作日，必须本人领取
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                公转私<br />
                日限额预计50万<br />
                月限额2000万（具体以银行审批为准）
              </div>
            </a-card-grid>



            <a-card-grid style="width:10%;text-align:left;background-color: #4167E8;" :hoverable="false">
              <div class="card-grid-cont h2 backColor">手续费</div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h2">
                单笔转账金额<br />
                &emsp;0.2万元以下（含），2元/笔<br />
                &emsp;0.2万-0.5万元（含），5元/笔<br />
                &emsp;0.5万-1万元（含），10元/笔<br />
                &emsp;1万-5万元（含），15元/笔<br />
                &emsp;5万元以上，0.03%（最高50元）/笔
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h2">
                银行UK15.5/个；<br />
                网银证书费80元；<br />
                网银年费10元；<br />
                跨行转账：<br />
                &emsp;&emsp; 1万元以下，5元/笔<br />
                &emsp;&emsp; 1万-10万，10元/笔<br />
                &emsp;&emsp; 10万-50万，15元/笔；<br />
                &emsp;&emsp; 50万-100万，20万/笔；<br />
                &emsp;&emsp; 最高1000万，200万/笔
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h2">
                开户服务费100元<br />
                UK服务费25元/月
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h2">无手续费</div>
            </a-card-grid>


            <a-card-grid style="width:10%;text-align:left;background-color: #4167E8;" :hoverable="false">
              <div class="card-grid-cont h3 backColor">TIPS</div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                开户快<br />
                适合没有实际经营地址，可以到场开户的客户。
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                额度大，审核周期较长<br />
                适合没有实际经营地址，可以到场开户的客户。
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                额度大；UK审核周期较长
              </div>
            </a-card-grid>
            <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
              <div class="card-grid-cont h3">
                线上提交、审核快、操作简单<br />
                适合已经开过基本户但额度较低的客户。
              </div>
            </a-card-grid>

            <a-radio-group v-model="value" @change="onChange" style="width: 100%;">


              <a-card-grid style="width:10%;text-align:left" :hoverable="false">
                <div class="card-grid-cont h1"></div>
              </a-card-grid>
              <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
                <div class="card-grid-cont h1">
                  <a-radio :value="1">选择</a-radio>
                </div>
              </a-card-grid>
              <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
                <div class="card-grid-cont h1">
                  <a-radio :value="2"> 选择</a-radio>
                </div>
              </a-card-grid>
              <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
                <div class="card-grid-cont h1">
                  <a-radio :value="3">选择</a-radio>
                </div>
              </a-card-grid>
              <a-card-grid style="width:22.5%;text-align:left" :hoverable="false">
                <div class="card-grid-cont h1">
                  <a-radio :value="4">选择</a-radio>
                </div>
              </a-card-grid>
            </a-radio-group>



          </a-card>
        </div>
      </div>
      <div class="page-body-item" v-if="showPeopleInfo">
        <div class="title">请填写财务人员信息</div>
        <div class="body">
          <div class="form-con">
            <a-form v-bind="formItemLayout" :form="form">
              <a-form-item label="财务姓名：">
                <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入财务姓名!' }] }]" />
              </a-form-item>
              <a-form-item label="身份证号：">
                <a-input
                  v-decorator="['cardNum', { rules: [{ required: true, message: '请输入身份证号!' }, { validator: (rule, value, callback) => { handleCardNum(rule, value, callback) } }] }]" />

              </a-form-item>
              <a-form-item label="财务实名手机号：">
                <a-input
                  v-decorator="['phoneNumber', { rules: [{ required: true, message: '请输入财务实名手机号！' }, { validator: (rule, value, callback) => { handlePhoneCheck(rule, value, callback) } }] }]" />
              </a-form-item>

            </a-form>
          </div>

        </div>
      </div>
      <div class="page-body-item btn" v-if="!isOutsideData">
        <a-button type="primary" block @click="handleSubmit">提交业务申请</a-button>
      </div>
    </div>
  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbserviceEnterprise'
const typeList_ = {
  1: '上海浦东发展银行（荆州分行营业部）',
  2: '中国邮政储蓄银行（荆州分行营业部）',
  3: '招商银行（荆州分行营业部）',
  4: '浙江网商银行',
}
export default {
  name: 'BankAccount',
  props:{
    isOutside:{type:Boolean}
  },
  data() {
    return {
      isOutsideData:false,
      typeList: typeList_,
      entName: '',
      entId: '',
      value: 0,
      showPeopleInfo: true,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      form: this.$form.createForm(this, { name: 'coordinated' }),
      formItemLayout: {
        labelCol: {
          xs: { span: 5 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 10 },
        },
      },
      config: {
        rules: [{ type: 'object', required: true, message: 'Please select time!' }],
      },
      rangeConfig: {
        rules: [{ type: 'array', required: true, message: 'Please select time!' }],
      },
    }
  },
  watch: {
    isOutside: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Boolean]'){
          this.isOutsideData = val
        }
      },
      deep: true,
      immediate: true
    },
  },

  mounted() {
    const { entName, bizId } = this.$route.query
    if(entName && bizId){
      this.entName = entName
      this.entId = bizId
      this.isOutsideData = false
    }else {
      this.isOutsideData = true
    }
    // console.log('开户行 BankAccount==》', this, this.$route.query);
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handlePhoneCheck(rule, value, callback) {
      let reg = /^(1\d{10})$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确手机号"))
      } else {
        callback()
      }
    },
    handleCardNum(rule, value, callback) {
      var reg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确身份证号"))
      } else {
        callback()
      }
    },
    onChange(e) {
      const radioNum = e.target.value
      console.log('radio checked', e.target.value);
      if (radioNum === 4) {
        this.showPeopleInfo = false
      } else {
        this.showPeopleInfo = true

      }
    },
    /**
     * 获取页面数据  外部使用
     */
    getParam() {
      let isPass = true
      if (this.value == 0) {
        this.$message.warning('请选择开户行')
        isPass = false
        return {isPass,verificationForm:false, param:null}
      }
      const param = {
        "bankName": this.typeList[this.value],
        openType: this.value,
        "cardNo": "",
        "entId": this.entId,
        "financialName": "",
        "phone": ""
      }
      let res = false
      if (this.value !== 4) {
        this.form.validateFields((err, values) => {
          if (!err) {
            res = true
            // console.log('Received values of form: ', values);
            param.cardNo = values.cardNum
            param.financialName = values.name
            param.phone = values.phoneNumber
            isPass = true
          }else {
            isPass = false
          }
        });
      } else {
        // 不需要校验表单
        res = true
      }
      return {isPass,verificationForm:res, param}
    },

    handleSubmit() {
      // console.log('提交===》',this.value);
      const res = this.getParam()
      if(!res.isPass){
        return false
      }
      if (res.verificationForm) {
        // 跳转到 企业详情-已设立
        getDataForDB('创建银行开户', res.param).then(res => {
          // console.log('创建银行开户 ====>', res, param);
          if (res.code == 200) {
            this.$message.success('创建成功')
            this.$router.push({
              path: '/enterprise/enterpriseList/enterpriseDetails1',
              query: {
                bizId: this.entId // '209218'
              }
            });
          } else {
            this.$message.warning(res.message)
          }
        })
       }
    }
  }
}
</script>

<style lang="less">
.bank-account-page-con {
  .card-title {
    font-size: 28px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  // .card-body {
  //   padding: 5px 20px 20px 20px;
  // }
  .bank-account-page-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .page-body-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      padding: 20px;
      margin: 10px 0;

      &.btn {
        padding: 10px 35%;
      }

      .title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 28px;
        padding: 10px 0;
      }

      .body {
        width: 100%;
        padding: 10px 15px;

        .card-grid-cont {
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 23px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          &.h1 {
            height: 50px;
            justify-content: center;
          }

          &.h2 {
            height: 280px;
            overflow: auto;
            align-items: flex-start;
          }

          &.h3 {
            height: 200px;

          }

          &.backColor {
            background-color: #4167E8;
            color: #FFFFFF;
            justify-content: center;
          }
        }

        .form-con {
          width: 50%;
        }
      }
    }
  }
}
</style>
